<!DOCTYPE html>
<html>	
	<head>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
		<script type="text/javascript">
			function save(){
				var temp = 'Report \n';
				temp += document.getElementById('illness').value + "\n";
				temp += "From Date \n";
				temp += document.getElementById('date1').value + "\n";
				temp += "To Date \n";
				temp += document.getElementById('date2').value + "\n";
				temp += "Sanctioning Authority" + "\n";
				temp += document.getElementById('authority').value + "\n";
				temp += "Report Details \n";
				temp += document.getElementById('report').value;
				
				alert(temp);
			}

			function reset() {
			}
		</script>
	</head>
	<body class="container">
		<div class="jumbotron text-center">
			<h2> Attendance Page for Naveen</h2>
		</div>
		<div class="panel panel-header">
			<p></p>
		</div>
		<form style="background:orange;" onsubmit="save()">
			<div class="panel panel-body" style="background:grey">
				<label>Type Of Issue:</label>
				<select id="illness">
					<option value="" disabled selected>Select your option</option>
					<option>Illness</option>
					<option>Personal Reason</option>
				</select>
				<br />
				<div>
					<label>From Date:</label>
					<input type="date" id="date1" required>
					<label>First Half Only</label>
					<input type="checkbox" id="firsth">
					<label>Second Half Only</label>
					<input type="checkbox" id="secondh">
					<br />
				</div>
				<br />
				<div>
					<label> To Date: </label>
					<input type="date" id="date2" required>
					<label>First Half</label>
					<input type="checkbox" id="tofirst">
					<br />
				</div>
				<br />
				<textarea id="report" placeholder="Reason" rows="5" cols="40" required></textarea>
			</div>
			<div class="panel panel-footer">
				<h4>Sanctioning Authority :</h4>
				<div>
				<select id="authority">
					<option value="" disabled selected>Select your option</option>
					<option>Naveen</option>
					<option>Kruthika</option>
				</select>
				<input type="submit" value="submit" class='btn btn-primary'>
				<button id="view" class="btn btn-success" onclick="save()">View</button>
				<button id="clear" class="btn btn-danger" onclick="reset()">Clear</button>
			</div>
		</div>
		</form>
	</body>
</html>


